<template>
  <!-- 花字设置 -->
  <div class="font_setting_item" v-if="isShow">
    <span class="font_style_title">花字设置</span>

    <a-tabs v-model:activeKey="flower_type" @change="tabChange">
      <a-tab-pane key="effectColor" tab="推荐花字">
        <div class="font_style_box">
          <div
            class="font_style_content_box"
            :class="{ active_height: isFlod == false }"
          >
            <!-- 可选项 -->
            <div
              @click="selectFlower(i.id)"
              class="font_style_content_item"
              :class="{ active_border: currentFlowerId == i?.id }"
              v-for="i in FlowerAliArr"
              :key="i.id"
            >
              <img
                class="font_img"
                :src="i.image"
                alt=""
                style="width: 100%; height: 51px; object-fit: contain"
              />
            </div>
          </div>
          <!-- 折叠 -->
          <div
            class="folding_panel"
            @click="foldingPanel"
            v-if="FlowerArr?.length > 20"
          >
            <span>{{ isFlod ? "收起更多" : "展开更多" }}</span>
            <CaretDownOutlined v-if="!isFlod" />
            <caret-up-outlined v-else />
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="system" tab="系统花字">
        <div class="font_style_box">
          <div
            class="font_style_sys_content_box"
            :class="{ active_height: isFlod == false }"
          >
           
            <!-- 可选项 -->
            <div
              @click="selectFontStyle(i.id)"
              class="font_style_sys_content_item"
              :class="{ active_border: currentSysFlowerId == i?.id }"
              v-for="i in FlowerArr"
              :key="i.name"
              :style="{
                background: i.boxcolor || '#e2e2e2'}"
            >
              <p class="font_style_content_item_text" :style="getStyle(i)">
                花字 
              </p>
            </div>
          </div>
          <!-- 折叠 -->
          <div
            class="folding_panel"
            @click="foldingPanel"
            v-if="FlowerArr?.length > 20"
          >
            <span>{{ isFlod ? "收起更多" : "展开更多" }}</span>
            <CaretDownOutlined v-if="!isFlod" />
            <caret-up-outlined v-else />
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup>
import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons-vue";
import { ref, reactive, watch, computed, onMounted,onUnmounted } from "vue";
import store from "@/store";

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
   }, //
  
})
// 新花字列表
const FlowerArr = computed(() => store.state.videoMixCut.FlowerArr);
// 阿里云花字列表
const FlowerAliArr = computed(() => store.state.videoMixCut.FlowerAliArr);
let flower_type = ref('effectColor')
let currentFlowerId = ref(FlowerAliArr.value[0]?.id);
let currentSysFlowerId = ref(FlowerArr.value[0]?.id);

// 折叠或展开
const isFlod = ref(false);
const foldingPanel = () => {
  isFlod.value = !isFlod.value;
};
// 获得对应项的字体样式
const getStyle = (item) => {
  return {
    color: item.fontcolor,
    "-webkit-text-stroke": item.bordercolor ? `1px ${item.bordercolor}` : "",
  };
};
const selectFlower = (id) => {
  currentFlowerId.value = id;
  
}
const selectFontStyle = (id) => {
  currentSysFlowerId.value = id;
}
onUnmounted(() => {
  isFlod.value = false;
});

</script>
<style lang="less" scoped>
.font_setting_item{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.font_style_content_box{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
   
    max-height: unset;
    overflow: unset;
  }
.font_style_content_item{
  background-color: #eee;
  border-radius: 5px;
  border: 2px solid #eee;
  cursor: pointer;
  &:hover{
    border-color: var(--ss-primary-color);
  }
}
.active_height{
  max-height: 126px!important;
  overflow: hidden!important;
}
.folding_panel{
  color: #737a87;
  text-align: center;
  width: 100%;
  display: block;
  cursor: pointer;
  margin-top: 15px;
}
.font_style_content_item_text {
  font-size: 20px;
  line-height: 51px;
  text-align: center;
  margin: 0;
  font-weight: 900;
}
.font_style_sys_content_box{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.font_style_sys_content_item{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 5px;
  cursor: pointer;
  &:hover{
    border-color: var(--ss-primary-color);
  }
}
.font_disabled{
  font-size: 20px;
}
.active_border{
  border-color: var(--ss-primary-color)!important;
}
</style>
